<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Bootstrap test</title>
<link rel="stylesheet" href="style/bootstrap-1.1.0.css">
</head>
<body>
	<div class="container">

		<div style="z-index: 5;" class="topbar-wrapper">
			<div class="topbar">
				<div class="fill">
					<div class="container">
						<h3>
							<a href="#">Project Name</a>
						</h3>
						<ul>
							<li class="active"><a href="#">Home</a>
							</li>
							<li><a href="#">Link</a>
							</li>
							<li><a href="#">Link</a>
							</li>
							<li><a href="#">Link</a>
							</li>
						</ul>
						<form action="">
							<input type="text" placeholder="Search">
						</form>
						<ul class="nav secondary-nav">
							<li class="menu"><a class="menu" href="#">Dropdown</a>
								<ul class="menu-dropdown">
									<li><a href="#">Secondary link</a>
									</li>
									<li><a href="#">Something else here</a>
									</li>
									<li class="divider"></li>
									<li><a href="#">Another link</a>
									</li>
								</ul></li>
						</ul>
					</div>
				</div>
				<!-- /fill -->
			</div>
			<!-- /topbar -->
		</div>
		<ul class="tabs">
			<li class="active"><a href="#">Home</a></li>
			<li><a href="#">Profile</a></li>
			<li><a href="#">Messages</a></li>
			<li><a href="#">Settings</a></li>
			<li><a href="#">Contact</a></li>
		</ul>

		<ul class="pills">
			<li class="active"><a href="#">Home</a>
			</li>
			<li><a href="#">Profile</a>
			</li>
			<li><a href="#">Messages</a>
			</li>
			<li><a href="#">Settings</a>
			</li>
			<li><a href="#">Contact</a>
			</li>
		</ul>
		<div class="row">
    <table class="zebra-striped">
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Language</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Some</td>
            <td>One</td>
            <td>English</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Joe</td>
            <td>Sixpack</td>
            <td>English</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Stu</td>
            <td>Dent</td>
            <td>Code</td>
          </tr>
        </tbody>
    </table>
    <table id="sortTableExample" class="zebra-striped">
        <thead>
          <tr>
            <th class="header">#</th>
            <th class="yellow header headerSortDown">First Name</th>
            <th class="blue header">Last Name</th>
            <th class="green header">Language</th>
          </tr>
        </thead>
        <tbody>
          
          
          
        <tr>
            <td>2</td>
            <td>Joe</td>
            <td>Sixpack</td>
            <td>English</td>
          </tr><tr>
            <td>3</td>
            <td>Stu</td>
            <td>Dent</td>
            <td>Code</td>
          </tr><tr>
            <td>1</td>
            <td>Your</td>
            <td>One</td>
            <td>English</td>
          </tr></tbody>
      </table>
    <div class="page-header">
    	<h1>Forms</h1>
  	</div>
    <div class="span4 columns">
      <h2>Default styles</h2>
      <p>All forms are given default styles to present them in a readable and scalable way. Styles are provided for text inputs, select lists, textareas, radio buttons and checkboxes, and buttons.</p>
    </div>
    <div class="span12 columns">
      <form>
        <fieldset>
          <legend>Example form legend</legend>
          <div class="clearfix">
            <label for="">X-Large Input</label>
            <div class="input">
              <input type="text" size="30" name="xlInput" id="xlInput" class="xlarge">
            </div>
          </div> <!-- /clearfix -->
          <div class="clearfix">
            <label for="">Select</label>
            <div class="input">
              <select>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
            </div>
          </div> <!-- /clearfix -->
          <div class="clearfix">
            <label for="">Select</label>
            <div class="input">
              <select class="medium">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
            </div>
          </div> <!-- /clearfix -->
          <div class="clearfix">
            <label>Uneditable Input</label>
            <div class="input">
              <span class="uneditable-input">Some Value Here</span>
            </div>
          </div> <!-- /clearfix -->
          <div class="clearfix">
            <label for="disabledInput">Disabled Input</label>
            <div class="input">
              <input type="text" disabled="" placeholder="Disabled input here… carry on." size="30" name="disabledInput" id="disabledInput" class="xlarge disabled">
            </div>
          </div> <!-- /clearfix -->
          <div class="clearfix error">
            <label for="xlInput">X-Large Input</label>
            <div class="input">
              <input type="text" size="30" name="xlInput" id="xlInput" class="xlarge error">
              <span class="help-inline">Small snippet of help text</span>
            </div>
          </div> <!-- /clearfix -->
        </fieldset>
        <fieldset>
          <legend>Example form legend</legend>
          <div class="clearfix">
            <label for="prependedInput">Prepended Text</label>
            <div class="input">
              <div class="input-prepend">
                <span class="add-on">@</span>
                <input type="text" size="16" name="prependedInput" id="prependedInput" class="medium">
              </div>
            </div>
          </div> <!-- /clearfix -->
          <div class="clearfix">
            <label for="prependedInput2">Prepended Checkbox</label>
            <div class="input">
              <div class="input-prepend">
                <label class="add-on"><input type="checkbox" value="" id="" name=""></label>
                <input type="text" size="16" name="prependedInput2" id="prependedInput2" class="mini">
              </div>
            </div>
          </div> <!-- /clearfix -->
          <div class="clearfix">
            <label for="appendedInput">Appended Checkbox</label>
            <div class="input">
              <div class="input-append">
                <input type="text" size="16" name="appendedInput" id="appendedInput" class="mini">
                <label class="add-on active"><input type="checkbox" checked="checked" value="" id="" name=""></label>
              </div>
            </div>
          </div> <!-- /clearfix -->
          <div class="clearfix">
            <label for="xlInput">File Input</label>
            <div class="input">
              <input type="file" name="fileInput" id="fileInput" class="input-file">
            </div>
          </div> <!-- /clearfix -->
        </fieldset>
        <fieldset>
          <legend>Example form legend</legend>
          <div class="clearfix">
            <label id="optionsCheckboxes">List of Options</label>
            <div class="input">
              <ul class="inputs-list">
                <li>
                  <label>
                    <input type="checkbox" value="option1" name="optionsCheckboxes">
                    <span>Option one is this and that&mdash;be sure to include why it’s great</span>
                  </label>
                </li>
                <li>
                  <label>
                    <input type="checkbox" value="option2" name="optionsCheckboxes">
                    <span>Option two can also be checked and included in form results</span>
                  </label>
                </li>
                <li>
                  <label>
                    <input type="checkbox" value="option2" name="optionsCheckboxes">
                    <span>Option three can&mdash;yes, you guessed it&mdash;also be checked and included in form results</span>
                  </label>
                </li>
                <li>
                  <label class="disabled">
                    <input type="checkbox" disabled="" value="option2" name="optionsCheckboxes">
                    <span>Option four cannot be checked as it is disabled.</span>
                  </label>
                </li>
              </ul>
              <span class="help-block">
                <strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.
              </span>
            </div>
          </div> <!-- /clearfix -->
          <div class="clearfix">
            <label>Date Range</label>
            <div class="input">
              <div class="inline-inputs">
                <input type="text" value="May 1, 2011" class="small">
                <input type="text" value="12:00am" class="mini">
                to
                <input type="text" value="May 8, 2011" class="small">
                <input type="text" value="11:59pm" class="mini">
                <span class="help-inline">All times are shown as Pacific Standard Time (GMT -08:00).</span>
              </div>
            </div>
          </div> <!-- /clearfix -->
          <div class="clearfix">
            <label for="textarea">Textarea</label>
            <div class="input">
              <textarea name="textarea" id="textarea" class="xxlarge"></textarea>
              <span class="help-block">
                Block of help text to describe the field above if need be.
              </span>
            </div>
          </div> <!-- /clearfix -->
          <div class="clearfix">
            <label id="optionsRadio">List of Options</label>
            <div class="input">
              <ul class="inputs-list">
                <li>
                  <label>
                    <input type="checkbox" value="option1" name="optionsCheckboxes">
                    <span>Option one is this and that&mdash;be sure to include why it’s great</span>
                  </label>
                </li>
                <li>
                  <label>
                    <input type="checkbox" value="option2" name="optionsCheckboxes">
                    <span>Option two can also be checked and included in form results</span>
                  </label>
                </li>
              </ul>
            </div>
          </div> <!-- /clearfix -->
          <div class="actions">
            <button class="btn primary" type="submit">Save Changes</button>&nbsp;<button class="btn" type="reset">Cancel</button>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
		<div class="span4">
	      <h2>Stacked forms</h2>
	      <p>Add <code>.form-stacked</code> to your form’s HTML and you’ll have labels on top of their fields instead of to their left. This works great if your forms are short or you have two columns of inputs for heavier forms.</p>
	    </div>
		<form class="form-stacked" action="">
        <fieldset>
          <legend>Example form legend</legend>
          <div class="clearfix">
            <label for="">X-Large Input</label>
            <div class="input">
              <input type="text" size="30" name="xlInput" id="xlInput" class="xlarge">
            </div>
          </div> <!-- /clearfix -->
          <div class="clearfix">
            <label for="">Select</label>
            <div class="input">
              <select>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
            </div>
          </div> <!-- /clearfix -->
        </fieldset>
        <fieldset>
          <legend>Example form legend</legend>
          <div class="clearfix error">
            <label for="xlInput">X-Large Input</label>
            <div class="input">
              <input type="text" size="30" name="xlInput" id="xlInput" class="xlarge error">
              <span class="help-inline">Small snippet of help text</span>
            </div>
          </div> <!-- /clearfix -->
          <div class="clearfix">
            <label id="optionsCheckboxes">List of Options</label>
            <div class="input">
              <ul class="inputs-list">
                <li>
                  <label>
                    <input type="checkbox" value="option1" name="optionsCheckboxes">
                    <span>Option one is this and that&mdash;be sure to include why it’s great</span>
                  </label>
                </li>
                <li>
                  <label>
                    <input type="checkbox" value="option2" name="optionsCheckboxes">
                    <span>Option two can also be checked and included in form results</span>
                  </label>
                </li>
              </ul>
              <span class="help-block">
                <strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.
              </span>
            </div>
          </div> <!-- /clearfix -->
        </fieldset>
        <div class="actions">
          <button class="btn primary" type="submit">Save Changes</button>&nbsp;<button class="btn" type="reset">Cancel</button>
        </div>
      </form>
		<div style="padding: 14px 19px;" class="well">
            <button class="btn primary" type="submit">Submit</button>&nbsp;<button class="btn" type="submit">Cancel</button>&nbsp;<button class="btn danger">Delete</button>
        </div>
        <div class="well">
        	<a class="btn large primary" href="#">Primary action</a>
        	<a class="btn large" href="#">Action</a>
        </div>
        <h3>Disabled state</h3>
        <h4>Links</h4>
        <div class="well">
        <a class="btn large primary disabled" href="#">Primary action</a>
        <a class="btn large disabled" href="#">Action</a>
        </div>
        <h4>Buttons</h4>
        <div class="well">
           <button disabled="" class="btn large primary disabled">Primary action</button>&nbsp;<button disabled="" class="btn large">Action</button>
        </div>
		<div class="pagination">
			<ul>
				<li class="prev disabled"><a href="#">&larr; Previous</a>
				</li>
				<li class="active"><a href="#">1</a>
				</li>
				<li><a href="#">2</a>
				</li>
				<li><a href="#">3</a>
				</li>
				<li><a href="#">4</a>
				</li>
				<li><a href="#">5</a>
				</li>
				<li class="next"><a href="#">Next &rarr;</a>
				</li>
			</ul>
		</div>
	</div>
</body>
</html>